<template>
  <view class="flex justify-center items-center">
    <view class="flex items-center h-25 leading-25" @click="changeStatus">
      <view>{{ searchType.label }}</view>
      <uni-icons class="ml-5" type="down" size="14"></uni-icons>
    </view>
    <view v-show="showDateFilter" class="absolute left-0 top-35 w-full z-20 bg-white">
      <view
        v-for="item in searchTypeRange"
        :key="item.value"
        class="flex items-center justify-between px-10 py-12 border-t border-solid border-[#efefef]"
        :class="searchType.value === item.value ? 'bg-blue-50 text-blue-500' : ''"
        @click="handleClick(item)"
      >
        <view v-if="item.value === 'custom' && searchType.value === 'custom'">
          {{ `${chooseDate[0]} 至 ${chooseDate[1]}` }}
        </view>
        <view v-else class="tracking-[2px]">{{ item.label }}</view>
        <view v-if="searchType.value === item.value">
          <uni-icons type="checkmarkempty" color="#1e6af9" size="20" />
        </view>
      </view>
    </view>
  </view>
  <uni-popup ref="popup" type="bottom" background-color="#fff" borderRadius="10px 10px 0 0" :is-mask-click="false">
    <view class="flex justify-between items-center p-10 py-15 border-b border-solid border-[#efefef] mb-30">
      <view class="text-gray-500 text-base" @click="popup.close()">取消</view>
      <view class="text-blue-500 text-base" @click="setTime">确定</view>
    </view>
    <view class="h-200 mx-10">
      <uni-datetime-picker
        type="daterange"
        class="custom px-13 py-7 bg-white text-[#666] rounded-[6px]"
        v-model="chooseDate"
        placeholder="请选择"
        rangeSeparator="至"
      >
      </uni-datetime-picker>
    </view>
  </uni-popup>
</template>
<script setup>
import { ref } from 'vue';

const props = defineProps({
  defaultIndex: {
    type: Number,
    default: 2,
  },
});
const showDateFilter = ref(false);
const searchTypeRange = [
  { label: '今天', value: 'today' },
  { label: '近7天', value: 'week' },
  { label: '近30天', value: 'month' },
  { label: '自定义', value: 'custom' },
];
const searchType = ref(searchTypeRange[props.defaultIndex]);
const chooseDate = ref([]);
const popup = ref(null);
const emit = defineEmits(['change', 'maskLayer']);
function setTime() {
  if (!chooseDate.value.length) {
    uni.showToast({
      title: '请选择日期范围',
      icon: 'none',
    });
    return;
  }
  searchType.value = { label: '自定义', value: 'custom' };
  emit('change', {
    filter_time_json: JSON.stringify({
      type: 'custom',
      value: [chooseDate.value[0], chooseDate.value[1]],
    }),
  });
  popup.value.close();
}
function handleClick(item) {
  if (item.value === 'custom') {
    changeStatus();
    popup.value.open();
  } else {
    searchType.value = { ...item };
    changeStatus();
    emit('change', {
      filter_time_json: JSON.stringify({
        type: searchType.value.value,
        value: [],
      }),
    });
  }
}
function changeStatus() {
  if (showDateFilter.value) {
    emit('maskLayer', false);
    closeFilter();
  } else {
    emit('maskLayer', true);
    openFilter();
  }
}
function openFilter() {
  showDateFilter.value = true;
}
function closeFilter() {
  showDateFilter.value = false;
}
defineExpose({
  openFilter,
  closeFilter,
});
</script>
